<template>
	<view class="tabbar-container" :style="uni.$utils.disposeSafeBottomFun()">
		<template v-for="(item, index) in props.tabbarList" :key="item.id">
			<view class="tabbar-item" :class="[item.centerItem ? 'center-item' : '']" @click="changeItem(item)">
				<view class="item-top">
					<image :src="props.currentIndex == item.id ? item.selectIcon : item.icon"></image>
				</view>
				<view class="item-bottom" :class="[props.currentIndex == item.id ? 'item-active' : '']">
					<text>{{ item.text }}</text>
				</view>
			</view>
		</template>
	</view>
</template>

<script setup lang="ts" name="qms-tabbar">
	import { ref, computed, getCurrentInstance, nextTick } from 'vue';

	const emit = defineEmits(['change']);

	const props = defineProps({
		tabbarList: {
			type: Array as () => any[],
			default: () => []
		},
		currentIndex: {
			type: Number,
			default: 0
		},


	});

	const changeItem = (item : any) => {
		emit('change', item)
	}


	// export default {
	// 	name: "qms-tabbar",
	// 	props: {
	// 		currentIndex: {
	// 			type: Number,
	// 			default: 0
	// 		}
	// 	},
	// 	data() {
	// 		return {
	// 			tabbarList: [{
	// 					id: 0,
	// 					icon: '/static/tabbar-icons/Index.png',
	// 					selectIcon: '/static/tabbar-icons/Index_Check.png',
	// 					text: '首页',
	// 					centerItem: false
	// 				},
	// 				{
	// 					id: 1,
	// 					icon: '/static/tabbar-icons/control.png',
	// 					selectIcon: '/static/tabbar-icons/controlCheck.png',
	// 					text: '智控',
	// 					centerItem: false
	// 				},
	// 				{
	// 					id: 4,
	// 					icon: '/static/tabbar-icons/add-white.png',
	// 					selectIcon: '/static/tabbar-icons/add-white.png',
	// 					text: '',
	// 					centerItem: true
	// 				},
	// 				{
	// 					id: 2,
	// 					icon: '/static/tabbar-icons/stats.png',
	// 					selectIcon: '/static/tabbar-icons/statsCheck.png',
	// 					text: '商城',
	// 					centerItem: false
	// 				},
	// 				{
	// 					id: 3,
	// 					icon: '/static/tabbar-icons/me.png',
	// 					selectIcon: '/static/tabbar-icons/me_Check.png',
	// 					text: '我的',
	// 					centerItem: false
	// 				}
	// 			],
	// 			lastCallCom: 0
	// 		};
	// 	},
	// 	mounted() {
	// 		uni.hideTabBar();
	// 	},
	// 	methods: {
	// 		changeItem(item) {
	// 			let that = this;
	// 			if (that.$utils.isEmpty(that.$store.state.appConfigInfo.Authorization_Info) ||
	// 				!that.$store.state.appConfigInfo.Authorization_Info.Authorization) {
	// 				return uni.showToast({
	// 					title: '本机未授权 请前往授权',
	// 					icon: 'none'
	// 				});
	// 			}

	// 			if (item.id === 4) {
	// 				const throttle = (fn, delay = 1000) => {
	// 					const now = Date.now();
	// 					if (now - that.lastCallCom < delay) return;
	// 					that.lastCallCom = now;
	// 					fn();
	// 				};

	// 				throttle(() => {
	// 					that.$emit("change", item);
	// 				});
	// 			} else {
	// 				that.$emit("change", item);
	// 			}
	// 		}
	// 	}
	// }
</script>

<style>
	view {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.tabbar-container {
		/* position: fixed;
		bottom: 0;
		left: 0; */
		width: 100%;
		/* height: 60px; */
		box-shadow: 0 -8px 14px -10px #999;
		border-top: 2px solid #f9f9f9;
		display: flex;
		align-items: center;
		padding: 5px 0;
		color: #999999;
		background-color: #fff;
	}

	.tabbar-container .tabbar-item {
		width: 20%;
		height: 50px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.tabbar-container .item-active {
		/* color: #4cbbff; */
		color: #51d0d0;
	}

	.tabbar-container .center-item {
		display: block;
		position: relative;
	}

	.tabbar-container .tabbar-item .item-top {
		width: 40px;
		height: 40px;
		padding: 10px;
	}

	.tabbar-container .center-item .item-top {
		flex-shrink: 0;
		width: 70px;
		height: 70px;
		position: absolute;
		top: -30px;
		/* left: calc(50% - 50px); */
		left: 50%;
		transform: translateX(-50%);
		border-radius: 50%;
		box-shadow: 0px -6px 9px -10px #999;
		background-color: #ffffff;
	}

	.tabbar-container .tabbar-item .item-top image {
		width: 100%;
		height: 100%;
	}

	.tabbar-container .tabbar-item .item-bottom {
		font-size: 14px;
		width: 100%;
	}

	.tabbar-container .center-item .item-top image {
		/* background-color: #4cbbff; */
		background-color: #51d0d0;
		border-radius: 50%;
		padding: 4px;
	}


	.tabbar-container .center-item .item-bottom {
		position: absolute;
		bottom: 5px;
	}
</style>